<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="../css/training.css" />
    <script src="../../lib/jquery-1.5.2.min.js"></script>
    <script src="../js/meatSpriteCanvas.js"></script>
    <script src="../js/ease.js"></script>
    <script src="../js/training.js"></script>
    <script>
      $(function () {
        meatSprite.total = 6;
        meatSprite.fps = 6;
        meatSprite.setTarget($('#token'), 100, 100);
        meatSprite.image = $('#source_img')[0];
        $('#btn').click(function (e) {
          meatSprite.startMoveTo(parseInt($('#xpos').val()), parseInt($('#ypos').val()));
        });
        $('#play_btn').click(function (e) {
          meatSprite.play();
        });
        $('#stop_btn').click(function (e) {
          meatSprite.stop();
        });
        $('#focus').mousedown(startDrag);
        $('#focus').mouseup(stopDrag);
        $('#func').change(function (e) {
          meatSprite.ease = ease[$(this).val()];
        });
        _pos = $('#stage').offset();
      });
    </script>
  </head>
  <body>
    <div id="panel">
      <div id="output">output</div>
      <label for="xpos">X:</label>
      <input type="text" size="3" id="xpos" value="300" />
      <label for="ypos">Y:</label>
      <input type="text" size="3" id="ypos" value="150" />
      <select id="func">
        <option value="line">线性</option>
        <option value="sin">正弦</option>
      </select>
      <input type="button" value="移动" id="btn" />
      <input type="button" value="播放" id="play_btn" />
      <input type="button" value="停止" id="stop_btn" />
    </div>
    <div id="source">
      <img src="../images/124.png" id="source_img" />
    </div>
    <div id="stage">
      <canvas id="token" width="100" height="100" style="background:none"></canvas>
      <div id="focus" title="拖到到目标位置"></div>
    </div>
  </body>
</html>